let layer = layui.layer
let form = layui.form;

getArticleCate()
function getArticleCate() {
    // axios 请求数据
    axios.get('/my/article/cates').then(({ data: { data } }) => {
        // console.log(res);

        // 遍历data数组
        const htmlStr = data.map(item => `
          <tr>
          <td>${item.name}</td>
          <td>${item.alias}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${item.Id}">编辑</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id="${item.Id}">删除</button>
            </td>
          </tr>
    `).join('')
        $('#tb').html(htmlStr)
    })

}
// 添加类别功能
let newStr = `
    <form id="addForm" class="layui-form">
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
      `
// 绑定点击事件


let indexAddForm;
$('#btnAddCate').click(function () {
    indexAddForm = layer.open({
        content: newStr, // 内容
        type: 1,  // 页面层
        title: '添加文章类别', // 标题
        area: ['500px', '300px'] // 宽高
    });
})

// 提交 ==> 触发表单的submit事件，由于表单是动态创建的，所以注册事件一定要使用事件委托(编辑，删除功能都类似)
$('body').on('submit', '#addForm', function (e) {
    e.preventDefault() //阻止默认行为

    // 收集表单数据
    let data = $(this).serialize()

    // for (let i = 0; i < 100; i++) {
    //     const data = `name=素质&alias=别出口成章 }`
    //     axios.post('/my/article/addcates', data)
    //         .then(res => {
    //             console.log(res)
    //         })
    //         .catch(err => {
    //             console.error(err);
    //         })
    // }
    // axios 请求数据
    axios.post('/my/article/addcates', data).then(({ data: { status, message } }) => {
        // console.log(data);

        if (status !== 0) {
            // 添加失败
            return layer.msg(message)
        }

        // 添加成功,关闭弹出层
        layer.close(indexAddForm)

        // 重新获取所有的分类渲染展示到页面中
        getArticleCate()

        layer.msg(message)
    })
})

// 编辑类别功能
let editFormStr = `
    <form id="editForm" class="layui-form" lay-filter="editForm">
    <!-- 存id -->
        <div class="layui-form-item layui-hide">
            <label class="layui-form-label">Id名称</label>
            <div class="layui-input-block">
                <input type="text" name="Id" required lay-verify="required" placeholder="请输入Id" autocomplete="off"
                class="layui-input">
            </div>
        </div>
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                class="layui-input">
            </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                class="layui-input">
            </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
            </div>
        </div>
    </form>
      `
// 绑定点击事件
let editIndex
$('#tb').on('click', '.btn_edit', function () {
    // 获取到数据，填充到修改的表单中
    // 接口中需要携带id ==> 给按钮添加自定义属性
    let id = $(this).attr("data-id");

    // 发送请求
    // :id 整个替换成具体
    axios.get(`/my/article/cates/${id}`).then(({ data: res }) => {
        console.log(res);

        // 填充表单数据
        //给表单赋值
        //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
        form.val("editForm", res.data);
    })


    editIndex = layer.open({
        content: editFormStr, // 内容
        type: 1,  // 页面层250px
        title: '修改文章类别', // 标题
        area: ['500px', '250px'] // 宽高
    });

})

// 更新功能
$('body').on('submit', '#editForm', function (e) {
    e.preventDefault() // 阻止默认行为

    // 收集表单数据
    let data = $(this).serialize()
    // console.log(data);

    axios.post('/my/article/updatecate', data).then(({ data: { status, message } }) => {
        if (status !== 0) {
            // 编辑失败
            return layer.msg(message)
        }

        // 关闭弹出层
        layer.close(editIndex)

        // 重新axios获取数据
        getArticleCate()

        // 编辑成功
        layer.msg(message)
    })
})

// 删除
$('#tb').on('click', '.btn_delete', function () {
    let id = $(this).attr('data-id')

    // for (let i = 10346; i < 10516; i++) {
    //     axios.get('/my/article/deletecate/' + id)
    //         .then(res => {
    //             console.log(res)
    //         })
    //         .catch(err => {
    //             console.error(err);
    //         })
    // }

    axios.get(`/my/article/deletecate/${id}`).then(({ data: { status, message } }) => {
        if (status !== 0) {
            // 删除失败
            return layer.msg(message)
        }

        // 删除成功
        layer.msg(message)

        // axios获取数据渲染
        getArticleCate()
    })
})